<template>
  <div class='ele-body'>
    <a-card :bordered='false'>
      <a-form ref='queryForm' layout='inline' :model='queryData'>
        <a-form-item label='发布版本号' name='code'>
          <a-input v-model:value='queryData.code' placeholder='发布版本号'></a-input>
        </a-form-item>
        <a-form-item label='发布版本' name='name'>
          <a-input v-model:value='queryData.name' placeholder='发布版本'></a-input>
        </a-form-item>
        <a-form-item label='机型' name='urlType'>
          <a-select v-model:value='queryData.urlType' placeholder='机型' style='width: 183px'>
            <a-select-option value='10'>android</a-select-option>
            <a-select-option value='20'>ios</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type='primary' @click='onQueryEvent'>查询</a-button>
            <a-button @click='onReset'>重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>

    <a-card :bordered='false' style='margin-top: 20px'>
      <ele-pro-table
        ref='table'
        row-key='id'
        :datasource='datasource'
        :columns='columns'
        :where='queryData'
        :scroll="{ x: 'max-content' }"
      >
        <template #toolbar>
          <a-space>
            <a-button type='primary' @click='visible = true'>新增版本</a-button>
<!--            <a-button>导出Excel</a-button>-->
          </a-space>
        </template>
        <template #image='{record}'>
          <img :src='record.image' style='width: 50px;height: 50px;object-fit: cover;'>
        </template>
        <template #status='{record}'>
          <a-switch :checked='record.statusFlag == 1' @change='onSwitchChange($event, record)' />
        </template>
        <template #action='{record}'>
          <a-space>
            <a-button type='link' @click='onDelete(record)'>删除</a-button>
            <a-button type='link' @click='getDetails(record)'>编辑详情</a-button>
          </a-space>
        </template>
      </ele-pro-table>
    </a-card>

    <a-modal v-model:visible='visible' title='新增服务' @ok='onConfirm' @cancel='onCancel' @update:visible="updateVisible">
      <a-form  :model='formData' :rules='formRules' ref='formData' :label-col="{ style: { width: '100px' } }"
              labelAlign='right' style='width: 450px'>
        <a-form-item label='发布版本' name='name'>
          <a-input v-model:value='formData.name' placeholder='请填写发布版本' maxlength='30' />
        </a-form-item>
        <a-form-item label='发布版本号' name='code'>
          <a-input v-model:value='formData.code' type='number' placeholder='请填写发布版本号'/>
        </a-form-item>

        <a-form-item label='更新说明' name='content'>
          <a-textarea v-model:value='formData.content' placeholder='请填写更新说明' />
        </a-form-item>
        <a-form-item label='更新类型' name='forciblyFlag'>
          <a-radio-group name="radioGroup" v-model:value="formData.forciblyFlag">
            <a-radio value="10">正常更新</a-radio>
            <a-radio value="20">强制更新</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label='机型' name='urlType'>
          <a-radio-group name='radioGroup' v-model:value='formData.urlType'>
            <a-radio value='10'>android</a-radio>
            <a-radio value='20'>ios</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if='formData.urlType == 20' label='下载地址' name='iosUrl' >
          <a-input v-model:value='formData.iosUrl'  placeholder='请填写ios下载地址' style="width: 50%" />
        </a-form-item>
        <a-form-item v-else label='下载地址' name='androidUrl'>
          <a-input v-model:value='formData.androidUrl' placeholder='请填写android下载地址' style="width: 50%" />
          <a-upload
            v-model:file-list="formData.fileList"
            name="file"
            :max-count="1"
            :action="uploading.url"
            @change="onUploading"
          >
            <a-button style="margin-left: 5px">
              <upload-outlined></upload-outlined>
              上传文件
            </a-button>
          </a-upload>
        </a-form-item>
        <a-form-item label='发布时间' name='sendTime'>
          <a-date-picker v-model:value='formData.sendTime' show-time placeholder='请选择发布时间' style='width: 100%'
                         format='yyyy.MM.DD HH:ss:mm'/>
        </a-form-item>
        <a-form-item label='备注' name='remark'>
          <a-textarea v-model:value='formData.remark' placeholder='备注' />
        </a-form-item>
        <a-form-item label='状态' name='statusFlag'>
          <a-switch v-model:checked='formData.statusFlag' />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { versionApi } from '@/api/versionApi';
import { Modal } from 'ant-design-vue';
import { createVNode } from 'vue';
import moment from 'moment';
import {FileUploadUrl} from "@/api/FileApi";

export default {
  name: 'index',
  data() {
    return {
      visible: false,
      uploading: {
        url: `${process.env.VUE_APP_API_BASE_URL}/business/admin/upload/uploadFile`,
      },
      queryData: {
        code: '', name: '', urlType: ''
      },
      formData: {
        code: '', // 发布版本号
        name: '', // 发布版本
        content: '', // 更新说明
        iosUrl: '', // ios下载地址
        androidUrl: '', // android下载地址
        urlType: '10', // 机型(10：安卓，20：ios)
        sendTime: '', // 发布时间
        remark: '', // 备注
        forciblyFlag: '10', // 是否强制更新(10：正常，20：强制更新)
        statusFlag: true, // 状态：1-启用，2-禁用
        fileList:[],
      },
      // fileList:[],
      // 是否是修改
      isUpdate: false,
      // 上传文件的url
      FileUploadUrl: `/api${FileUploadUrl}?secretFlag=N`,
      // 上传文件时候要带header
      headers: {
        Authorization: this.$setting.takeToken()
      },
      formRules: {
        code: { required: true, message: '请填写发布版本号', trigger: 'blur' },
        name: { required: true, message: '请填写发布版本', trigger: 'blur' },
        content: { required: true, message: '请填写更新说明', trigger: 'blur' },
        iosUrl: { required: true, message: '请填写ios下载地址', trigger: 'blur' },
        androidUrl: { required: true, message: '请填写android下载地址', trigger: 'blur' },
        sendTime: { required: true, message: '请选择发布时间', trigger: 'change', type: 'object' }
      },
      datasource: '/business/admin/version/findPage',
      columns: [
        {
          key: 'index',
          width: 48,
          title: '序号',
          align: 'center',
          customRender: ({ index }) => index + 1
        },

        {
          dataIndex: 'name',
          title: '发布版本',
          align: 'center'
        },
        {
          dataIndex: 'code',
          title: '发布版本号',
          align: 'center'
        },
        {
          dataIndex: 'content',
          title: '更新说明',
          align: 'center'
        },
        // {
        //   dataIndex: 'iosUrl',
        //   title: 'ios下载地址',
        //   align: 'center'
        // },
        // {
        //   dataIndex: 'androidUrl',
        //   title: 'android下载地址',
        //   align: 'center'
        // },
        {
          dataIndex: 'urlType',
          title: '机型',
          align: 'center',
          customRender: ({ record }) => record.urlType == 10 ? 'android' : 'ios'
        },

        {
          dataIndex: 'forciblyFlag',
          title: '强制更新',
          align: 'center',
          customRender: ({ record }) => record.forciblyFlag == 10 ? '正常' : '强制更新'
        },

        {
          dataIndex: 'sendTime',
          title: '发布时间',
          align: 'center'
        },
        {
          dataIndex: 'createTime',
          title: '创建时间',
          align: 'center'
        },
        {
          dataIndex: 'statusFlag',
          title: '状态',
          align: 'center',
          slots: { customRender: 'status' }
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          slots: { customRender: 'action' }
        }
      ]
    };
  },
  methods: {
    async getDetails(item) {
      const res = await versionApi.findDetail({ id: item.id });
      console.log('getDetails', res.data.data);
      const entity = res.data.data;
      entity.code = entity.code.toString();
      entity.sendTime = moment(entity.sendTime);
      entity.statusFlag = entity.statusFlag == 1;
      this.formData = entity;
      const list  = [{
        name:entity.androidUrl.substring(entity.androidUrl.lastIndexOf('1')),
        uid:'1',
        status:'done',
        url:entity.androidUrl
      }]
      this.formData.fileList = list
      this.visible = true;
    },
    onDelete(item) {
      Modal.confirm({
        title: '提醒',
        content: '确定删除该版本吗?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        onOk: async () => {
          await versionApi.del(item);
          this.$message.success('操作成功');
          this.$refs.table.onRefresh();
        }
      });
    },
    async onSwitchChange(event, item) {
      item.statusFlag = event ? 1 : 2;
      await versionApi.edit(item);
      this.$message.success('操作成功');
      this.$refs.table.onRefresh();
    },
    onConfirm() {
      this.$refs.formData.validate().then(async () => {
        const formData = JSON.parse(JSON.stringify(this.formData));
        formData.sendTime = moment(formData.sendTime).format('YYYY.MM.DD HH:ss:mm');
        formData.statusFlag = formData.statusFlag ? 1 : 2;
        const request = formData.id ? versionApi.edit : versionApi.add;
        await request(formData);
        this.$message.success('操作成功');
        this.$refs.table.onRefresh();
        this.$refs.formData.resetFields();
        this.visible = false;
        this.fileList = []
      });
    },
    onUploading(event) {
      if (event.fileList.length > 1) {
        event.fileList.splice(0, 1)
      }
      this.formData.fileList = event.fileList;
      const file = event.file;
      const res = file.response;
      this.formData.androidUrl = res.data
    },
    onQueryEvent() {
      this.$refs.table.reload({ page: 1 });
    },
    onReset() {
      this.$refs.queryForm.resetFields();
      this.$refs.table.reload({ page: 1 });
    },
    onCancel() {
      // this.$refs.formData.resetFields();
    this.formData = {
        code: '', // 发布版本号
          name: '', // 发布版本
          content: '', // 更新说明
          iosUrl: '', // ios下载地址
          androidUrl: '', // android下载地址
          urlType: '10', // 机型(10：安卓，20：ios)
          sendTime: '', // 发布时间
          remark: '', // 备注
          forciblyFlag: '10', // 是否强制更新(10：正常，20：强制更新)
          statusFlag: true, // 状态：1-启用，2-禁用
          fileList:[],
      },
      this.visible = false;
    },
    /**
     * 更新编辑界面的弹框是否显示
     *
     * @param value true-显示，false-隐藏
     * @author chenjinlong
     * @date 2021/4/7 11:00
     */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
};
</script>

<style scoped>

</style>
